<route lang="json5">
{
  layout: 'default2',
  style: {
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#FFFFFF',
    navigationBarTitleText: '我的',
  },
}
</route>

<template>
  <view class="overflow-hidden" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <view class="pb-2">
      <wd-button type="icon" icon="notification-filled" @click="goNoticePage()"></wd-button>
    </view>
    <wd-gap bg-color="#f3f4f6"></wd-gap>
    <view class="bg-gray-100 h-screen px-4">
      <view class="bg-white mb-4 rounded p-4 flex flex-col">
        <view class="flex justify-between mb-2">
          <view class="flex justify-start">
            <view class="mr-4">
              <wd-img :src="userInfo.avatarUrl" :width="60" :height="60" round />
            </view>
            <view class="flex flex-col">
              <view class="mb-2">
                <wd-text :text="userInfo.username"></wd-text>
              </view>
              <view>
                <wd-text :text="userInfo.account"></wd-text>
              </view>
            </view>
          </view>
          <view><wd-button type="icon" icon="tips"></wd-button></view>
        </view>
        <view class="flex justify-around divide-x">
          <view class="flex flex-col items-center">
            <wd-text text="0"></wd-text>
            <wd-text text="获赞"></wd-text>
          </view>
          <view class="flex flex-col items-center">
            <wd-text text="0"></wd-text>
            <wd-text text="发布"></wd-text>
          </view>
          <view class="flex flex-col items-center">
            <wd-text text="0"></wd-text>
            <wd-text text="收藏"></wd-text>
          </view>
        </view>
      </view>

      <view class="mb-4">
        <wd-img
          custom-class="image"
          src="https://img.picui.cn/free/2024/10/10/6707f8bea2669.jpg"
          :height="100"
          :width="380"
          radius="8"
        />
      </view>
      <view class="mb-4 rounded">
        <wd-cell-group>
          <wd-cell title="会员权益" value=">" />
          <wd-cell title="在线客服" value=">" />
          <wd-cell title="意见反馈" value=">" />
          <wd-cell title="关于我们" value=">" />
        </wd-cell-group>
      </view>
      <view class="px-6 flex justify-center">
        <wd-button :type="!isLogined ? 'primary' : 'error'" @click="LoginORLogout()">
          {{ !isLogined ? '登录' : '注销' }}
        </wd-button>
      </view>
    </view>
  </view>
  <wd-popup
    :safe-area-inset-bottom="true"
    v-model="show"
    position="top"
    custom-style="height: 320px;"
  >
    <view class="flex flex-col px-4 mt-28">
      <wd-text text="欢迎登录" size="24px"></wd-text>
      <wd-gap bg-color="#fff"></wd-gap>
      <wd-input type="text" v-model="userLogin.account" placeholder="请输入账户" />
      <wd-gap bg-color="#fff"></wd-gap>
      <wd-input
        type="text"
        v-model="userLogin.password"
        clearable
        show-password
        placeholder="请输入密码"
      />
      <wd-gap bg-color="#fff"></wd-gap>
      <wd-button type="primary" @click="toLogin(userLogin)">确定</wd-button>
    </view>
  </wd-popup>
  <wd-toast />
</template>

<script lang="ts" setup>
const { safeAreaInsets } = uni.getSystemInfoSync()
import { useAuthStore, useUserStore } from '@/store'
import { useToast } from 'wot-design-uni'
const { resetToken } = useAuthStore()
const { login, userInfo, isLogined, clearUserInfo } = useUserStore()
const toast = useToast()

const show = ref(false)
const LoginORLogout = () => {
  if (!isLogined) {
    show.value = true
  }
  if (isLogined) {
    clearUserInfo()
    resetToken()
    toast.show('注销成功')
  }
}

const goNoticePage = () => {
  uni.navigateTo({
    url: '/pages-sub/notice/notice',
  })
}

const userLogin = reactive<ILoginUser>({
  account: '',
  password: '',
})
const toLogin = (data: ILoginUser) => {
  if (isLogined) {
    return
  }
  login(data)
  toast.show('登录成功')
}
</script>

<style lang="scss" scoped>
:deep(.image) {
  width: 100% !important;
}
</style>
